<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>案例</title>
    <style>
        .outer {
            width: 1000px;
            height: 200px;
            border: 1px solid black;
        }
     
        .inner {
            margin: 0 auto;
            width: 130px;
            height: 130px;
            background-image: url("../images/bike.png");
            background-repeat: no-repeat;

            /* animation:rider 5s linear; */
            /* 减去第一个自己是31,如果写成32就会错的很怪 */
            animation:rider 5s steps(31) infinite;

        }

        @keyframes rider  {
            0%{

            }
            100%{
                /*算好位置，图片往上移动是负数，最后的y轴不是底部，是-(4160-130),还要减去130*/
                background-position: 0 -4030px;
            }
        }


    </style>
</head>

<body>
<div class="outer">
    <div class="inner"></div>
</div>
</body>

</html>